<style lang="less" scoped>
.house-item {
    background: linear-gradient(180deg, #fff2e6 0%, #ffffff 40%);
    border-radius: 20rpx;
    position: relative;
    color: #333;
    font-size: 24rpx;

    &.mb {
        margin-bottom: 30rpx;
    }
    

    .item-label-count-down {
      position: absolute;
      top: -12rpx;
      left: -6rpx;
      z-index: 99;
      width: 190rpx;
      height: 54rpx;
      line-height: 54rpx;
      text-align: center;
      color: #4e260a;
      font-weight: 500;
      &::before {
        content: "";
        display: inline-block;
        position: absolute;
        background-image: url(https://pic.bangbangtongcheng.com/static/MyPublic/countdown.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        top: 0;
        left: -10rpx;
        width: 100%;
        height: 100%;
      }
      .text {
        position: absolute;
        z-index: 2;
        left: 20rpx;
      }
    }
    .item-box {
        display: flex;
        padding: 30rpx 20rpx;

        .goods-image {
            background-color: #f8f8f8;
            width: 300rpx;
            height: 200rpx;
            border-radius: 20rpx;
        }
        .item-info {
            padding-left: 20rpx;
            width: calc(100% - 300rpx);
            height: 200rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .item-title {
                font-size: 32rpx;
                line-height: 44rpx;
                font-weight: 600;
                width: 100%;
                color: #000;
                .ellipsis {
                    width: 100%;
                    display: inline-block;
                }
            }
            .subclass-box {
                width: 100%;
                .subclass-item {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin-bottom: 10rpx;

                    .card-icon {
                        width: 24rpx;
                        height: 24rpx;
                        margin-right: 6rpx;
                        vertical-align: text-top;
                    }
                    .subclass {
                        flex: 1;
                        line-height: 32rpx;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        line-clamp: 1;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                    }
                    .price {
                        color: #E00201;
                        font-size: 32rpx;
                        font-weight: 600;
                    }
                }
            }
        }
    }
    .ellipsis {
		/*强制文本在一行内显示*/
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

.title-tag {
    min-width: 70rpx;
    height: 40rpx;
    background: #e7f5f4;
    border-radius: 4rpx;
    box-sizing: border-box;
    vertical-align: middle;
    color: #0fa291;
    font-size: 24rpx;
    line-height: 24rpx;
    margin-right: 10rpx;
    padding: 8rpx 11rpx;
    display: inline-block;
}
</style>

<template>
    <view class="house-item" :class="{mb: itemMB}" @click="details">
        <view v-if="data.upStatus == 1 && data.examineStatus == 2" class="item-label-count-down">
            <view class="text">
                有效期{{ 30 - data.daysSinceCreateDate }}天
            </view>
        </view>
        <view class="item-box">
            <image
                class="goods-image"
                mode="aspectFit"
                :src="data.displayDiagram || data.houseImage"
            />
            <view class="item-info">
                <view class="item-title">
                    <text class="name ellipsis">
                        <text class="title-tag">
                            {{ data.transactionType == 1 ? '出租房' : data.newOld == 1 ? '新房' : '二手房' }}
                        </text>
                        {{ data.title }}
                    </text>
                </view>
                <view class="subclass-box">
                    <view class="subclass-item">
                        <view class="subclass">
                            <image v-if="data.region" class="card-icon"
                                src="https://pic.bangbangtongcheng.com/static/bbcz/index-location.png" />
                            {{ data.region }}
                        </view>
                        <view class="subclass">
                            <image v-if="data.cellName" class="card-icon"
                                src="https://pic.bangbangtongcheng.com/static/bbcz/index-xiaoqu.png" />
                            {{ data.cellName || '' }}
                        </view>
                    </view>
                    <view class="subclass-item">
                        <view class="subclass">
                            <image v-if="data.floor" class="card-icon"
                                src="https://pic.bangbangtongcheng.com/static/bbcz/index-louceng.png" />
                            {{ data.floor
                                ? data.floor.split('|')[0] + '层/共' + data.floor.split('|')[1] + '层'
                                : '' }}
                        </view>
                        <view class="subclass">
                            <image v-if="data.houseType" class="card-icon"
                                src="https://pic.bangbangtongcheng.com/static/bbcz/index-huxing.png" />
                            {{ data.houseType || '' }}
                        </view>
                    </view>
                    <view class="subclass-item">
                        <view class="subclass">
                            <image v-if="data.AREA || data.area" class="card-icon"
                                src="https://pic.bangbangtongcheng.com/static/bbcz/index-pingfang.png" />
                            {{ data.AREA || data.area }}㎡
                        </view>
                        <view class="price-box" style="text-align: right">
                            <view class="price subclass" v-if="data.transactionType == 2">
                                {{ Math.floor(data.price) }}万
                            </view>
                            <view v-else-if="data.transactionType == 1 && data.price <= 10000" class="price subclass">
                                {{ Math.floor(data.price) }}元{{ data.transactionType == 1 ? '/月' : '' }}
                            </view>
                            <view v-else-if="data.transactionType == 1 && data.price > 10000" class="price subclass">
                                {{ Math.floor(data.price) / 10000 }}万元
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default: () => ({})
        },
        itemMB: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            
        };
    },
    methods: {
        details() {
            this.$emit('item-click',this.data);
        }
    }
}
</script>